<template>
  <div>
    <div id="container"></div>
  </div>
</template>
   
  <script>
import axios from "axios";
var map = {}; //地图对象
var marker = {}; //标记对象
const markers = []; //标记对象数组

export default {
  data() {
    return {
      map: null,
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.createMap();
    }, 1000);
  },
  methods: {
    createMap() {
      const that = this;
      const map = new AMap.Map("container", {
        zoom: 17, //设置地图的缩放级别
        zooms: [8, 20], //设置地图的缩放级别区间
        viewMode: "2D",
          center: [117.095079,36.68178],
        //   mapStyle: "amap://styles/darkblue",
        mapStyle: "amap://styles/normal", //设置地图的显示样式
        features: ["road", "point"], //设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
      });
      this.map = map;
      //绑定地图点击事件
      map.on("click", function (e) {
        map.remove(markers);
        const { lng, lat } = e.lnglat;
        console.log(lng, lat,'hhhh');
        that.lng = lng;
        that.lat = lat;
        that.location = lng + "," + lat;
        // 创建一个 Marker 实例：  标记点信息
        var marker = new AMap.Marker({
          position: [lng, lat], // 经纬度
          anchor: "center",
          offset: new AMap.Pixel(0, 0),
          //创建一个自定义图标实例
          icon: new AMap.Icon({
            size: new AMap.Size(28, 30), // 图标尺寸
            image:
              "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", // 自定义图像的url
            imageSize: new AMap.Size(27, 30), // 根据所设置的大小拉伸或压缩图片
          }),
        });
        //只保留一个标记点
        markers.push(marker);
        map.add(marker);
      });
    },


    // let map = new AMap.Map('container', {
    //     zoom: 16, // 缩放级别
    //     center: [117.095007,36.681946] // 中心点坐标
    //   });

    //     // 添加地理位置定位
    //     new AMap.Geolocation({
    //     enableHighAccuracy: true, // 是否使用高精度定位，默认:true
    //     timeout: 10000           // 超过10秒后停止定位，默认：5s
    //   }).bindPopup('您当前的位置').addTo(map);
    //   // 添加标记
    //   let marker = new AMap.Marker({
    //     position: new AMap.LngLat(117.095007,36.681946), // 位置
    //     title: '北京天安门' // 标记标题
    //   });
    //   marker.setMap(map); // 在地图上添加点标记
},
  computed: {},
  components: {},
};
</script>
   
  <style lang = "less" scoped>
#container {
  width: 100%;
  height: 700px;
}
</style>